<template>
  <div class="flex vertical step-page">
    <vant-cell title="申请单号" :value="reqNo" />
    <vant-steps direction="vertical" :active="0" class="flex-1 step-cont">
      <vant-step v-for="({title,info,time},i) in steps" :key="i">
        <h3 class="title">{{title}}</h3>
        <p class="info">{{info}}</p>
        <p class="time">{{time}}</p>
      </vant-step>
    </vant-steps>
  </div>
</template>

<script>
export default {
  data(){
    const {reqNo=''}=this.$route.query
    return {
      reqNo,
      steps:[]
    }
  },
  created(){
    this.getSteps()
  },
  methods:{
    getSteps(){
      setTimeout(()=>{
        this.steps=[
          {
            title:'发证',
            info:'起运省完成发证。',
            time:'2017-04-03 12:00:00 '
          },
          {
            info:'起运省协调完成。协调意见：严格按照各省审批意见通行',
            time:'2017-04-02 12:00:00 '
          },
          {
            title:'审批',
            info:'天津审批通过。审批意见：根据天气和道路养护情况，合理规划好行驶时间和路线。',
            time:'2017-04-01 12:00:00 '
          },
          {
            info:'河北审批通过。审批意见：必须严格执行护送方案，做好企业自我监管。',
            time:'2017-04-01 12:00:00 '
          },
          {
            info:'北京审批通过。审批意见：关注微信公众号，查询下发核查、交警审批等状态。',
            time:'2017-04-01 12:00:00 '
          },
          {
            info:'上海审批通过。审批意见：关注微信公众号，查询下发核查、交警审批等状态。',
            time:'2017-04-01 12:00:00 '
          },
          {
            info:'南京审批通过。审批意见：关注微信公众号，查询下发核查、交警审批等状态。',
            time:'2017-04-01 12:00:00 '
          },
          {
            info:'湖北审批通过。审批意见：关注微信公众号，查询下发核查、交警审批等状态。',
            time:'2017-04-01 12:00:00 '
          },
          {
            title:'申请',
            info:'申请人提交申请，等待审批',
            time:'2017-04-01 10:00:00 '
          }
        ]
      },1000)
    }
  }
}
</script>

<style lang="less" scoped>
.step-page {
  width: 100%;
  height: 100%;
  overflow: hidden;
  & /deep/ .van-step {
    & + .van-step {
      padding-top: @s-20;
    }
    &:after {
      display: none;
    }
  }
  .step-cont {
    overflow: auto;
  }
  .title {
    font-size: @font-size-18;
    font-weight: bold;
  }
  /* .info {
  } */
  .time {
    text-align: right;
  }
}
</style>